<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="title">家庭经济状况登记表</view>
		<view class="bigTitle">共同生活家庭成员收入情况（元/年）</view>
		<view class="bottomOptions">
			<view class="bottomTitle">工资净收入</view>
			<view class="bottomOptionsBox">
				<view class="bottomOptionsBoxIn" v-for="(item,index) in list" :key="index">
					<view class="bottomOptionsTitle">{{item.name}}</view>
					<view class="inputBox">
						<input v-if="!isOpen" @input="checkInput($event,index)" type="digit" class="optionsInput" v-model="item.value">
						<view class="optionsInput" v-else>
							{{item.value}}
						</view>
						<view class="danwei">元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="button1" @click="save(false)">
			提交
		</view> -->
		<view class="button" v-if="isSave == '0'" @click="save(true)">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	export default {
		components:{
			otherList,userInfo
		},
		data(){
			return {
				isOpen:false,
				user:{},
				list:[
					{name:'工资',code:'wage',value:'0'},
					{name:'酬金',code:'salary',value:'0'},
					{name:'奖金',code:'bonus',value:'0'},
					{name:'劳动分红',code:'laborDividend',value:'0'},
					{name:'津贴',code:'allowance',value:'0'},
					{name:'补贴',code:'subsidy',value:'0'},
					{name:'其他',code:'other',value:'0'},
				],
				obj:{},
				isSave:'1',
				pageInfo:{
					pageName:'共同生活成员收入情况1',
					pagePath:'/pages/kancha/familyGetMoneyInfo',
					pageIndex:3
				}
			}
		},
		onLoad() {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.getPayDetail()
		},
		methods: {
			checkInput(e,index) {
				setTimeout(()=>{
					this.list[index].value = this.$verifyMoney(e.detail.value);
					this.list = JSON.parse(JSON.stringify(this.list))
				},0)
			},
			// 表单验证
			verifyData(){
				// 验证现金
				let arr = this.list
				let length = arr.length
				for(let i=0;i<length;i++){
					if(this.$verifyEmpty(arr[i].value)){
						return {
							title:arr[i].name+'不能为空',
							status:false
						}
					}
				}
				return {
					title:'验证通过',
					status:true
				}
			},
			// 获取收入情况
			async getPayDetail(){
				let res = await this.$get('/app/bus/indexSalary?guaranteeNumber='+uni.getStorageSync('guaranteeNumber'),{})
				if(res.code == 200){
					let obj = res.data[0]
					this.obj = res.data[0]
					this.list.forEach(item=>{
						item.value = obj[item.code]||0
					})
				}
			},
			async save(isLink){
				let result = this.verifyData()
				if(isLink){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				let data = {}
				this.list.forEach(item=>{
					data[item.code] = item.value||0
				})
				// let obj = {
				// 	"wage": "2000",
				// 	"salary": "1000",
				// 	"bonus": "500",
				// 	"laborDividend": "500",
				// 	"allowance": "100",
				// 	"subsidy": "200",
				// 	"other": "300"
				// }
				// Object.keys(obj).forEach(item=>{
				// 	if(data[item]){
				// 		data[item] = data[item]/1
				// 	} else {
				// 		data[item] = 0
				// 	}
				// })
				data.id = this.obj.id
				data.guaranteeNumber = uni.getStorageSync('guaranteeNumber')
				let res = await this.$post('/app/bus/updateSalary',data,false)
				if(res.code == 200){
					let pageStatus = uni.getStorageSync('pageStatus')
					if(result.status){
						pageStatus.familyGetMoneyInfo = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.familyGetMoneyInfo = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
					if(isLink){
						this.link()
					} else {
						// uni.showToast({
						// 	title: '信息修改成功',
						// 	duration:2000
						// });
					}
				}
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
				if(e){
					this.save(false)
				}
			},
			link() {
				uni.redirectTo({
					url:'/pages/kancha/familyGetMoneyInfoOne'
				})
			}
		}
	}
</script>

<style>
	page {
		background: white;
	}
</style>
<style scoped>
	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #fa5245;
		line-height: 1;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.bigTitle {
		font-size: 34rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.optionsBottomBox {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.line {
		height: 26rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}

	.uploadFile {
		width: 184rpx;
		height: 143rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.bottomOptions {
		width: 670rpx;
		padding: 20rpx 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
	}

	.bottomTitle {
		color: #ccc;
	}

	.bottomOptionsTitle {
		width: 140rpx;
	}

	.danwei {
		color: #ccc;
	}

	.bottomOptionsBox {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bottomOptionsBoxLast {
		margin-top: 0;
	}

	.lineTitle {
		margin-top: 40rpx;
	}

	.inputBox2 {
		margin-top: 20rpx;
	}

	.bottomOptionsBox2 {
		margin-top: 20rpx;
	}

	.bottomOptionsBoxIn {
		width: 260rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 45rpx;
	}

	.bottomOptions view {
		font-size: 26rpx;
	}

	.bottomOptionsBoxIn3 {
		width: 610rpx;
		justify-content: space-between;
	}

	.inputBox {
		display: flex;
		align-items: center;
	}

	.optionsInput {
		width: 100rpx;
		font-size: 26rpx;
	}

	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
</style>
